今天的部分則來談談component元件，其包含：HTML(template)、綁定資料(data)、方法(methods)、監聽 (watch)...等不同屬性，而他們的用法也與Vue的實例相似。

• 元件

Vue在應用程式上，主要是以component元件組成的，最上層以Root為主，下層則包含Header、Content、side。在每個component元件的data為互相獨立，然而在資料傳遞的時候，則需要去仰賴Props與Emit。

Props：由外向內傳入，特性為資料更新時同步傳入data，且即刻更新顯示頁面。
Emit：由內向外傳出，特性為事件觸發後才會更新資料，屬於事件類型。

• 元件使用方式

透過「全域註冊」或「局部註冊」的方式來去註冊元件。

• 全域註冊

<div id=”app”>
<component-example></component-example>
</div>
<script>
Vue.component("component-example", {
  template: `<div>{{text}}</div>`,
  data(){
    return{
      text:'example'
    }
  }
});
let vm = new Vue({
  el: "#app"
});
<script>

• 局部註冊

<div id=”app”>
 <component-example></component-example>
</div>
<script>
let vm = new Vue({
  el: "#app",
  components:{
    'component-example' :{
       template: `<div>{{text}}</div>`,
       data(){
         return {
          text:'example'
         }
       }
     }
  }
});
<script>

全域註冊是直接在物件註冊組件，在整個Vue應用程式中都可用這個組件。
區域註冊是各個實體選項的物件設定，這設定方式只有這個實體才可使用這個組件。

以上為今天的部分，感謝各位的閱讀，我們明天見囉～